import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';

import Bar3D from '../../home/Bar3D'
import setting from '../../../assets/imgs/test/setting.png'
import light from '../../../assets/imgs/test/light.png'
import pie from '../../../assets/imgs/test/pie.png'
import add from '../../../assets/imgs/test/add.png'


interface IProps {
    noOpenWo: {
        IsSystemdown: number,
        technician: number,
        workNum: number,
        todayNum: number
    }
    chartDataY: number[]
    chartDataX: string[]
}

interface IStates {
}

@observer
class Home extends React.Component<IProps, IStates> {

    constructor(props) {
        super(props);
    }


    public render() {
        const { chartDataX, chartDataY, noOpenWo } = this.props
        return (
            <div className={styles.twoTop}>
                <div className={styles.title}>工单状态</div>
                <div className={styles.bottom}>
                    <div className={styles.left}>
                        <div className={styles.leftTop}>
                            <div className={styles.topLeft}>
                                <div className={styles.topLeftC}>
                                    <img src={setting} className={styles.topLeftImg} />
                                </div>
                                <div>
                                    <p className={styles.topLeftNum}>{noOpenWo ? noOpenWo.workNum : ''}</p>
                                    <p className={styles.topLeftText}>系统工单数量</p>
                                </div>

                            </div>
                            <div className={styles.topRight}>
                                <div className={styles.topRightC}>
                                    <img src={light} className={styles.topRightImg} />
                                </div>
                                <div>
                                    <p className={styles.topRightNum}>{noOpenWo ? noOpenWo.IsSystemdown : ''}</p>
                                    <p className={styles.topRightText}>停机工单数量</p>
                                </div>
                            </div>
                        </div>
                        <div className={styles.leftBottom}>
                            <div className={styles.bottomLeft}>
                                <div className={styles.bottomLeftC}>
                                    <img src={pie} className={styles.bottomLeftImg} />
                                </div>
                                <div>
                                    <p className={styles.bottomLeftNum}>{noOpenWo ? noOpenWo.technician : ''}</p>
                                    <p className={styles.bottomLeftText}>维修工单数量</p>
                                </div>
                            </div>
                            <div className={styles.bottomRight}>
                                <div className={styles.bottomRightC}>
                                    <img src={add} className={styles.bottomRightImg} />
                                </div>
                                <div>
                                    <p className={styles.bottomRightNum}>{noOpenWo ? noOpenWo.todayNum : ''}</p>
                                    <p className={styles.bottomRightText}>当日工单数量</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.right}>
                        <Bar3D dataX={chartDataX} dataY={chartDataY} />
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
